<template>
  <div class="page">
    <div class="box-user">
      <div class="avatar"><img :src="agent.avatar"></div>
      <div class="info">
        <p class="nickname">{{ agent.title }}</p>
        <p class="phone">{{ agent.phone }}</p>
      </div>
      <div class="more" @click="logout">
        退出登录 <i class="icon el-icon-arrow-right" />
      </div>
    </div>
    <div class="main">
      <div class="box-info">
        <div class="income">
          <el-row>
            <div class="el-col el-col-8">
              <p class="label">今日收益</p>
              <p>
                <span class="money">{{ income.today }}</span>
                <span class="unit">元</span>
              </p>
            </div>
            <div class="el-col el-col-8">
              <p class="label">本月收益</p>
              <p>
                <span class="money">{{ income.month }}</span>
                <span class="unit">元</span>
              </p>
            </div>
          </el-row>
          <div class="btn-more" @click="linkto('H5Wallet')">查看收益</div>
        </div>
        <div class="params">
          <el-row>
            <!--<div class="el-col el-col-8">
              <p class="value">{{ income.total }} <span style="font-size: 12px;">元</span></p>
              <p class="label">总收益</p>
            </div>-->
            <div class="el-col el-col-8">
              <p class="value">{{ agent.rebate }}%</p>
              <p class="label">分成比例</p>
            </div>
            <div class="el-col el-col-8">
              <p class="value">{{ agent.rate_min }}%</p>
              <p class="label">最低进件费率</p>
            </div>
            <div class="el-col el-col-8">
              <p class="value">{{ agent.rate_shop }}%</p>
              <p class="label">商户自助进件费率</p>
            </div>
          </el-row>
        </div>

      </div>
      <div class="box-btns">
        <el-row>
          <div class="el-col el-col-6">
            <a @click="linkto('H5Shop')">
              <svg-icon class="icon" icon-class="ic_shop" />
              <p class="title">我的商户</p>
            </a>
          </div>
          <div class="el-col el-col-6">
            <a @click="linkto('H5Order')">
              <svg-icon class="icon" icon-class="ic_bill" />
              <p class="title">订单流水</p>
            </a>
          </div>
          <div class="el-col el-col-6" @click="linkto('H5JinjianList')">
            <svg-icon class="icon" icon-class="ic_jinjian" style="font-size: 34px; margin: 3px 0;" />
            <p class="title">进件记录</p>
          </div>
          <div class="el-col el-col-6" @click="doInvite">
            <svg-icon class="icon" icon-class="ic_invite" style="font-size: 34px; margin: 3px 0;" />
            <p class="title">邀请商户</p>
          </div>
        </el-row>
      </div>
    </div>
    <div class="box-menus" />
  </div>
</template>
<script>
import { getData } from '@/api/h5/index'
export default {
  name: 'H5Index',
  data() {
    return {
      agent: {},
      income: {},
      notice: null
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getData().then(res => {
        this.agent = res.data.agent
        this.income = res.data.income
        this.notice = res.data.notice
      })
    },
    linkto(path) {
      if (path === 'H5Wallet' || path === 'H5JinjianList') {
        this.$message.error('开发中')
        return
      }
      this.$router.push({
        name: path
      })
    },
    doInvite() {
      this.$message.error('开发中')
      return
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.replace({
        name: 'H5Login'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "~@/styles/h5/index.scss";
</style>
<style>
  .el-message {
    max-width: 96%;
    min-width: 80% !important;
  }
  .el-message-box {
    width: 80%;
  }
</style>
